<template>
  <div class="screenfull" @click='click'>
    <span :class="['iconfont',isFullscreen?'icon-10':'icon-11']"></span>
  </div>
</template>

<script>
import screenfull from 'screenfull'

export default {
  name: 'screenfull',
  props: {
    width: {
      type: Number,
      default: 22
    },
    height: {
      type: Number,
      default: 22
    },
    fill: {
      type: String,
      default: '#48576a'
    }
  },
  data() {
    return {
      isFullscreen: false
    }
  },
  methods: {
    click() {
      if (!screenfull.enabled) {
        this.$message({
          message: '您使用的浏览器不支持',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
      this.isFullscreen = !screenfull.isFullscreen
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.screenfull {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #5a5e66;
  vertical-align: 10px;
  font-size: 14px;
  .iconfont{
    font-size: 22px;
  }
}
</style>
